<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数独游戏</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
 <!-- 主菜单页面 -->
    <div class="page" id="main-page">
        <h1 class="game-title">数独游戏</h1>
        <button class="menu-btn" id="start-game-btn">开始游戏</button>
        <button class="menu-btn" id="continue-game-btn">继续游戏</button>
        <button class="menu-btn" id="new-game-btn">新游戏</button>
    </div>

    <!-- 难度选择页面 -->
    <div class="page" id="difficulty-page">
        <h2 class="level-title">选择难度</h2>
        <button class="difficulty-btn" id="easy-btn">
            <span>容易</span>
            <span class="difficulty-level">适合初学者</span>
        </button>
        <button class="difficulty-btn" id="medium-btn">
            <span>中等</span>
            <span class="difficulty-level">标准难度</span>
        </button>
        <button class="difficulty-btn" id="hard-btn">
            <span>困难</span>
            <span class="difficulty-level">挑战自我</span>
        </button>
        <button class="difficulty-btn" id="expert-btn">
            <span>专家</span>
            <span class="difficulty-level">高手专享</span>
        </button>
        <button class="menu-btn" id="cancel-btn">返回</button>
    </div>

    <!-- 关卡选择页面 -->
    <div class="page" id="level-page">
        <h2 class="level-title" id="level-difficulty-title">容易 - 关卡选择</h2>
        <div class="level-grid" id="level-grid"></div>
        <button class="menu-btn" id="level-back-btn">返回</button>
    </div>

    <!-- 游戏页面 -->
    <div class="page" id="game-page">
        <button class="back-btn" id="back-btn">←</button>
        <div class="game-container">
            <div class="game-header">
                <div class="level-info" id="level-info">关卡 1 容易</div>
                <div class="mistakes">错误: <span class="heart">❤</span><span class="heart">❤</span><span class="heart">❤</span></div>
                <div class="timer">0:00</div>
            </div>
            <div class="board-container">
                <div class="board" id="sudoku-board"></div>
            </div>
            <div class="game-controls">
                <button class="control-btn" id="undo-btn">撤销</button>
                <button class="control-btn" id="erase-btn">擦除</button>
                <button class="control-btn" id="notes-btn">笔记</button>
                <button class="control-btn" id="hint-btn">提示</button>
            </div>
            <div class="number-selector">
                <!-- 数字按钮将通过JS动态生成 -->
            </div>
        </div>
    </div>

    <!-- 游戏结束弹窗 -->
    <div class="game-over" id="game-over-popup">
        <h1 id="game-result">恭喜通关!</h1>
        <h2>难度: <span id="difficulty-display">容易</span></h2>
        <h2>关卡: <span id="level-display">1</span></h2>
        <h2>用时: <span id="time-display">0:00</span></h2>
        <h3 id="next-level-info">下一关卡已解锁!</h3>
        <button class="menu-btn" id="next-level-btn">下一关</button>
        <button class="menu-btn" id="play-again-btn">再玩一次</button>
        <button class="menu-btn" id="return-home-btn">返回主页</button>
    </div>

    
    <!-- 遮罩层 -->
    <div class="overlay" id="overlay"></div>

    <script src="script.js"></script>
</body>
</html>